<template>
	<view class="main">
		<view class="">
			<alltitleVue :title="title" :url="url" />
		</view>


		<view class="search">
			<image src="../static/home/seach.png" mode=""></image>

			<input v-model="keyword" type="text" class="search-input" @keyup.enter="searchData" 
				placeholder="搜索喜欢的商品" />
			<view class="icon-del" @click="del" v-if='keyword!=""'>
				<u-icon size="34" name="plus-circle"></u-icon>
			</view>

			<view class="vertical">
			</view>
			<view @tap="searchData" class="search-btn">
				搜索
			</view>
		</view>


		<view class="search-list" v-if="iskeyword != ''">
			<!-- 这个是下拉筛选，之后要用，开启 -->
			<!-- <view class="pullDown">
				<pullDown @inquire="inquire" :isTrue="isTrue" :isright="isright" :screen="screens"
					@sortProducts="sortProducts" :sort="synthesis" />
			</view> -->

			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="doctorCard" v-if="products.length>0">
					<view class="card-item" v-for="(item,index) in products" :key="item,id" @click="productClick(item)">
						<product :product="item" />
					</view>
				</view>
				<view class="box-empty" v-else>
					<u-empty text="未找到相关产品" mode="list"></u-empty>
				</view>
			</scroll-view>
		</view>


		<!-- <view class="illness-box">
			<view class="illness-title">
				热门搜索
			</view>
			<view v-if="hotDeptList.length === 0" class="no-data">暂无热搜</view>
			<view class="scroll-illness" v-else>
				<view class="illness-item" :id="item.letter" v-for="(item, index) in hotDeptList" :key="index"
					@click="onRank2Item(item)">
					<view class="box-title">
						{{item.name || item.title}}
					</view>
					
				</view>
			</view>

		</view> -->


	</view>
</template>

<script>
	import {
		getgoods
	} from '../service/api.js'
	import pullDown from '../components/pullDown.vue';
	import product from '../components/product.vue';
	import {
		toast,
		getStore,
		setStore,
		removeStore
	} from "@/utils/index";
	import alltitleVue from '../components/alltitle.vue';
	export default {
		components: {
			alltitleVue,
			product,
			pullDown
		},
		data() {
			return {
				iskeyword:"",
				isright: true,
				isTrue: true,
				products: [
				],
				url: "preLoading/search",
				//热门搜索
				hotDeptList: [],

				//搜索医生
				doctor_list: [{
					productName: "我是",
					name: "111111",
					typeActive: "种类"
				}],

				keyword: "",
				params: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: "",
					title: ""
				},
				location: {
					latitude: null,
					longitude: null,
				},
				timer: null,
				title: "搜索页"

			}
		},
		onShow() {

		},
		onLoad() {
			// this.getLocation(); // 获取位置
			// this.startLocationUpdates(); // 启动位置更新
		},
		onUnload() {
			// this.stopLocationUpdates(); // 停止位置更新
		},
		methods: {
			//请求药品数据
			async getproducts() {
				let res = await getgoods(this.params)
				if (res.code == 200) {

					this.products = res.rows;
					this.total = res.total


				}
			},
			//跳转产品详情
			productClick(item) {
				uni.navigateTo({
					url: `/integration/productList/index?id=${item.id}`
				})
			},
			lower() {},
			//子组件传递排序方法
			sortProducts(sortOrder) {
				this.params.orderByColumn = this.keyword;
				this.getproducts();


			},


			//热门搜索
			onRank2Item(item) {
				this.keyword = item.name
			},
			//搜索字显示红色
			highlightHospital(text, keyword) {
				const regExp = new RegExp(`(${keyword})`, 'gi'); // 创建正则表达式，'gi' 为忽略大小写的全局匹配
				return text.replace(regExp, `<span style="font-weight: bold; color: #CCA566;">$1</span>`);
			},

			//清空历史记录
			clearOld() {
				this.inputTxt = [];
				removeStore("inputTxt");
			},

			// /*获取搜素列表*/
			searchData() {
				if (this.keyWord == "") {
					return
				}
				this.iskeyword=this.keyword;
				this.params.title = this.keyword;
				this.getproducts();
				// this.doctor_list = [];
				// this.pushItem();

			},
			//产品详情
			itemHandle(item, type = "") {
				uni.navigateTo({
					url: '/integration/searchResults/index?name=' + this.keyword
				})
			},
			//清空输入
			del() {
				this.keyword = "";
				this.params.title=this.keyword;
				this.getproducts(this.params)
			},
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						this.location.latitude = res.latitude;
						this.location.longitude = res.longitude;

					},
					fail: (err) => {
						console.error('获取定位失败:', err);
					},
				});
			},
			startLocationUpdates() {
				this.timer = setInterval(() => {
					this.getLocation(); // 定期获取位置
				}, 5000); // 每5秒更新一次
			},
			stopLocationUpdates() {
				if (this.timer) {
					clearInterval(this.timer); // 清除定时器
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		background: #F5F3F0;

		.search {
			width: 654rpx;
			padding: 0 24rpx;
			height: 64rpx;
			background: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-left: 24rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.icon-del {
				transform: rotate(45deg);
			}

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #F5F3F0;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}
	}

	.search-list {
		border-radius: 24rpx 24rpx 0 0;
		position: fixed;
		z-index: 10;
		width: 100%;

		top: 276rpx;
		left: 0;
		background: #fff;

		border-radius: 24rpx 24rpx 0rpx 0rpx;

		.pullDown {


			padding: 24rpx;
		}

		.scroll-Y {
			height: calc(100vh - 282rpx);
			.doctorCard {
				padding: 24rpx 24rpx 24rpx 24rpx;
				.card-item{
					margin-bottom: 24rpx;
				}
			}
			.scroll-box {
				margin: 0 24rpx;
				padding: 0 26rpx;
				background: #fff;
				border-radius: 16rpx;
			}
		}
		.list {

			display: flex;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #E6E6E6;


			.title {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}
			}

			.office {
				text-align: center;
				padding: 2rpx 5rpx;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				border: 1rpx solid #E6E6E6;
			}
		}

		.list:last-child {
			border: none;
		}

	}

	.illness-box {
		padding: 24rpx;

		.no-data {
			font-size: 28rpx;
		}

		.illness-title {
			font-weight: 400;
			font-size: 28rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.scroll-illness {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.illness-item {
				font-size: 24rpx;
				color: #808080;
				margin-top: 16rpx;
				margin-right: 24rpx;
				padding: 0 12rpx;
				line-height: 40rpx;
				height: 40rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 1rpx solid #E6E6E6;
			}

		}
	}

	.box-empty {
		height: calc(100vh - 300rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>